<%--
  Created by IntelliJ IDEA.
  User: ZLY
  Date: 2020/11/17
  Time: 20:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
    <style>
        .di {
            width: 100%;
            height: 1000px;
            /*background-image: url(http://pic.netbian.com/uploads/allimg/170415/183708-1492252628e1e4.jpg);*/
            position: absolute;
        }

        .wai {
            margin: 0 auto;
            height: 100%;
            width: 1000px;
            overflow: hidden;
        }

        .caidan {
            background-color: #2E2D3C;
            height: 40px;
            width: 100%;
        }

        .lunbo {
            height: 400px;
            width: 100%;
            text-align: center;

        }

        .xuanze {
            height: 50px;
            width: 100%;
            background-color: #2E2D3C;
            padding-top: 10px;
            position: relative;
            padding-left: 280px;
        }

        .xuanze button {
            position: absolute;
            top: 10px;
        }

        .fangjian {
            position: relative;
            height: 200px;
            width: 100%;
            padding-top: 50px;
            padding-left: 10px;
            padding-bottom: 50px;
        }

        #img {
            width: 300px;
            height: 250px;
        }

        .table td {
            border: 3px solid;
            margin-top: 20px;
            width: 200px;
            height: 200px;
        }

        .table {
            border-collapse: separate;
            border-spacing: 100px 5px;
        }

        .table img {
            width: 200px;
            height: 170px;
        }

        .table input {
            height: 20px;
            line-hight: 20px;
            width: 50px;
            text-align: center;
            color: blue;
            /*
                  background-color: #000000;
            */
            border: 0;
        }

        p {
            font-size: 20px;
        }
        .bedInfo {
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
<div class="di">

    <div class="wai"><!-- 最外层div -->

<%--        <div class="caidan"><!-- 最上面caidan -->--%>
<%--            32321--%>
<%--        </div>--%>
        <div class="layui-header" style="background-color: whitesmoke">
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <!-- 显示用户名 -->
                        <span>
                            ${sessionScope.name}
                        </span>
                    </a>
                </li>
                <li class="layui-nav-item"><a href="/custom?method=exit">退出</a></li>
            </ul>
        </div>
        <div class="lunbo"><!--轮播图  -->
            <div class="layui-carousel" id="test1" style="height: 400px;">
                <div carousel-item>
                    <div><a href="www.baidu.com"><img src="https://dimg13.c-ctrip.com/images/200j19000001821inEAA7_R_900_372.jpg"
                                                      height="450"></a></div>
                    <div><a href="www.baidu.com"><img src="https://dimg11.c-ctrip.com/images/200q1800000154303B230_R_900_372.jpg"
                                                      height="450"></a></div>
                    <div><a href="www.baidu.com"><img src="https://dimg12.c-ctrip.com/images/2008190000015qichA501_R_900_372.jpg"
                                                      height="450"></a></div>
                    <div><a href="www.baidu.com"><img src="https://dimg11.c-ctrip.com/images/0204h1200082nav1vF9F9_R_900_372.jpg"
                                                      height="450"></a></div>
                    <div><a href="www.baidu.com"><img src="https://dimg10.c-ctrip.com/images/200o190000015p1xsC509_R_900_372.jpg"
                                                      height="450"></a></div>
                    <div><a href="www.baidu.com"><img src="https://dimg12.c-ctrip.com/images/200g190000015qwir1911_R_900_372.jpg"
                                                      height="450"></a></div>
                </div>
            </div>

            <div class="xuanze">
                <div class="layui-form-item layui-form layui-form-pane">
                    <label class="layui-form-label">房间类型</label>
                    <div class="layui-input-inline">
                        <select name="quiz1">
                            <option value="0">请选择房间类型</option>
                            <option value="1" selected="">单人间</option>
                            <option value="2">双人间</option>
                            <option value="3">套房</option>
                        </select>
                    </div>
                </div>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">查询</button>
            </div>


            <div class="fangjian"><!-- 房间类型 -->
                <table class="table">
                    <tr>
                        <td>
                            <img class="imgshow" src="http://image.wyn88.com/adminbranch/201705251402013098.jpg">
                            <input type="hidden" value="1">
                            <input type="text" value="双人间" name="">
                        </td>
                        <td>
                            <img class="imgshow" src="http://image.wyn88.com/adminbranch/202010261115048082.jpg">
                            <input type="hidden" value="2">
                            <input type="text" value="双人间" name="">
                        </td>
                        <td>
                            <img class="imgshow" src="http://image.wyn88.com/adminbranch/202009011511009012.jpg">
                            <input type="hidden" value="3">
                            <input type="text" value="双人间" name="">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img class="imgshow" src="http://image.wyn88.com/adminbranch/201711081443055041.jpg">
                            <input type="hidden" value="4">
                            <input type="text" value="双人间" name="">
                        </td>
                        <td>
                            <img class="imgshow" src="http://image.wyn88.com/adminbranch/201705251431023032_small.jpg">
                            <input type="hidden" value="4">
                            <input type="text" value="双人间" name="">
                        </td>
                        <td>
                            <img class="imgshow" src="http://image.wyn88.com/adminbranch/202010221511050021_small.jpg">
                            <input type="hidden" value="4">
                            <input type="text" value="双人间" name="">
                        </td>
                    </tr>
                </table>
            </div>


        </div>
    </div>
    <div id="info" style="display: none">
        <div class="wid_1">
            <img src="" id="img">
        </div>
        <div class="wid_1">
            <p>入住人数：<span class="accommodataInfo">2</span>人
                <span class="addBedInfo">(可加床)</span>
            </p>
            <p>上网方式：<span class="internetInfo">客房WIFI</span></p>
        </div>
        <div class="wid_2">
            <p>建筑面积：<span class="roomAreaMin">30</span>~<span class="roomAreaMax">32</span>㎡</p>
            <p>窗户：<span class="windowInfo">有</span></p>
        </div>
        <div class="wid_3">
            <p>楼层：<span class="startFloorInfo">6</span>~<span class="endFloorInfo">7</span>层</p>
            <p>无烟楼：<span class="smookingInfo">无限制</span></p>
        </div>
        <div class="wid_4">
            <p>床型：<span class="bedInfo">大床</span></p>
            <p>床型尺寸：<span class="bedInfo">1.8米</span></p>
        </div>
        <div class="wid_5">
            <p>价格：<span class="bedInfo" id="price"></span>元</p>
            <p>押金：<span class="bedInfo" id="yj"></span>元</p>
        </div>
    </div>

    <script>
        var images;
        /* 轮播 */
        layui.use(['form', 'layedit', 'laydate', 'carousel', 'layer', 'jquery'], function () {
            var carousel = layui.carousel;
            var layer = layui.layer;
            var $ = layui.jquery;
            //建造实例
            carousel.render({
                elem: '#test1'
                , width: '100%' //设置容器宽度
                , arrow: 'always' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });

            $(".imgshow").click(function () {
                var id = $(this).next().val();

                $.ajax({
                    url: "${pageContext.request.contextPath}/type?method=show",
                    type: "post",
                    data: {id: id},
                    async: false,
                    dataType: "JSON",
                    success: function (data) {
                        if (data != null) {
                            images = data;
                        }
                    }
                })
                var img = $(this).attr("src");
                $("#img").attr("src", img);
                $("#price").text(images.money);
                $("#yj").text(images.yj);
                layer.open({
                    type: 1,
                    title: ['房间信息', 'font-size:20px'],
                    closeBtn: 0,
                    area: ['400px', '560px'],
                    shadeClose: true,
                    skin: 'yourclass',
                    content: $("#info")
                });
            });

        });
    </script>
</div>
</body>
</html>

